﻿<!DOCTYPE HTML>
<html lang="zh-cn">
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>通用增删改查</title>

    <link href="/plugins/bootstrap-3.3.0/css/bootstrap.min.css" rel="stylesheet"/>
    <link href="/plugins/material-design-iconic-font-2.2.0/css/material-design-iconic-font.min.css"
          rel="stylesheet"/>
    <link href="/plugins/awesome-bootstrap-checkbox/awesome-bootstrap-checkbox.css" rel="stylesheet"/>

    <link href="/plugins/bootstrap-table-1.11.0/bootstrap-table.min.css" rel="stylesheet"/>
    <link href="/plugins/waves-0.7.5/waves.min.css" rel="stylesheet"/>
    <link href="/plugins/jquery-confirm/jquery-confirm.min.css" rel="stylesheet"/>

    <!--ztree-->
    <link href="/plugins/zTree/css/demo.css" rel="stylesheet" type="text/css" />
    <link href="/plugins/zTree/css/zTreeStyle/zTreeStyle.css" rel="stylesheet" type="text/css" />


    <style>
        ul.ztree {
            width: 100%;
            height: 100%;
            background-color: #FFF;
            border: none;
        }
        .tree-lab{
            padding-bottom: 5px;
        }
    </style>

    <link href="/app/css/common.css" rel="stylesheet"/>
</head>
<body>
<div id="main">
    <div id="toolbar">
        <a class="waves-effect waves-button" href="javascript:;" onclick="createAction()"><i class="zmdi zmdi-plus"></i>
            新增角色</a>

        <a class="waves-effect waves-button" href="javascript:;" onclick="deleteAction()"><i
                class="zmdi zmdi-close"></i> 删除角色</a>
    </div>
    <table id="table"></table>
</div>

<script src="/plugins/jquery.1.12.4.min.js"></script>
<script src="/plugins/bootstrap-3.3.0/js/bootstrap.min.js"></script>
<script src="/plugins/bootstrap-table-1.11.0/bootstrap-table.min.js"></script>
<script src="/plugins/bootstrap-table-1.11.0/locale/bootstrap-table-zh-CN.min.js"></script>
<script src="/plugins/waves-0.7.5/waves.min.js"></script>
<script src="/plugins/jquery-confirm/jquery-confirm.min.js"></script>
<script src="https://cdn.bootcss.com/moment.js/2.18.1/moment.min.js"></script>

<!--tree-->
<script src="/plugins/zTree/js/jquery.ztree.core.min.js" type="text/javascript"></script>
<script src="/plugins/zTree/js/jquery.ztree.excheck.min.js" type="text/javascript"></script>

<script src="/plugins/malihu-custom-scrollbar-plugin/jquery.mCustomScrollbar.concat.min.js"></script>

<script src="/app/js/common.js"></script>
<script src="/app/js/i-ajax.js"></script>
<script>
    var $table = $('#table');
    $(function () {
        jconfirm.defaults = {
            theme: 'material',
        };
        // bootstrap table初始化
        // http://bootstrap-table.wenzhixin.net.cn/zh-cn/documentation/
        $table.bootstrapTable({
            url: '/api/role',
            height: getHeight(),
            striped: true,
            search: true,
            searchOnEnterKey: true,
            showRefresh: true,
            showToggle: true,
            showColumns: true,
            minimumCountColumns: 2,
//            showPaginationSwitch: true,
            clickToSelect: true,
            pageSize: 20,
            pageList: [10, 20, 25, 50, 100],
//            detailView: true,
//            detailFormatter: 'detailFormatter',
            pagination: true,
            paginationLoop: false,
            classes: 'table table-hover table-no-bordered',
            sidePagination: "server",
            silentSort: false,
            smartDisplay: false,
            idField: 'id',
            sortName: 'id',
            sortOrder: 'asc',
            escape: true,
            maintainSelected: true,
            toolbar: '#toolbar',
            columns: [
                {field: 'state', checkbox: true},
                //   {field: 'avatar', title: '头像',  formatter: 'avatarFormatter', align: 'center'},
                {field: 'name', title: '角色名称', sortable: true, align: 'center'},
                {field: 'description', title: '角色描述', sortable: true, align: 'center'},
                {field: 'roleType', title: '权限类型', sortable: true, align: 'center'},
                {field: 'createdTime', title: '创建时间', sortable: true, formatter: 'dateFormatter', align: 'center'},
                {
                    field: 'action',
                    title: '操作',
                    align: 'center',
                    formatter: 'actionFormatter',
                    events: 'actionEvents',
                    clickToSelect: false,
                    switchable: true,
                }

            ],
            queryParams: function (params) {
                return {
                    size: params.limit,
                    page: params.offset / params.limit,
                    sort: params.sort + ',' + params.order,
                    name: params.search,
                };
            },
            responseHandler: function (data) {
                if (data.status == "SUCCESS") {
                    data = data.content;
                    return {total: data.totalElements, rows: data.content};
                } else {
                    $.confirm({
                        type: 'red',
                        title: false,
                        content: '请求数据失败',
                        autoClose: 'cancel|3000',
                        backgroundDismiss: true,
                        buttons: {
                            confirm: {
                                text: '确定',
                                btnClass: 'waves-effect waves-button'
                            }
                        }
                    });
                    return {total: 0, rows: []};
                }
            }
        }).on('all.bs.table', function (e, name, args) {
            $('[data-toggle="tooltip"]').tooltip();
            $('[data-toggle="popover"]').popover();
        });
    });
    function actionFormatter(value, row, index) {
        return [
            '<a class="edit ml10" href="javascript:void(0)" data-toggle="tooltip" title="编辑"><i class="glyphicon glyphicon-edit"></i></a>　',
            '<a class="remove ml10" href="javascript:void(0)" data-toggle="tooltip" title="删除"><i class="glyphicon glyphicon-remove"></i></a>',

        ].join('');
    }

    window.actionEvents = {
        'click .edit': function (e, value, row, index) {
            var rows = [];
            rows.push(row);
            updateRowsAction(rows);
        },
        'click .remove': function (e, value, row, index) {
            var rows = [];
            rows.push(row);
            deleteRowsAction(rows);
        },
    };


    function dateFormatter(date) {
        return date ? moment(date).format("YYYY-MM-DD, HH:mm:ss") : '-';
    }

    var href = location.href;

    // 新增
    var createDialog;
    function createAction() {
        location.href = href + "#"
        createDialog = $.dialog({
            animationSpeed: 300,
            title: '新增角色',
            content: 'url:/page/sys/role/form.html',
            onContentReady: function () {
                initMaterialInput();
            }
        });
    }

    // 编辑
    function updateAction() {
        var rows = $table.bootstrapTable('getSelections');
        updateRowsAction(rows);
    }

    function updateRowsAction(rows) {
        if (rows.length != 1) {
            $.confirm({
                title: false,
                content: '请选择一条记录！',
                autoClose: 'cancel|3000',
                backgroundDismiss: true,
                buttons: {
                    cancel: {
                        text: '取消',
                        btnClass: 'waves-effect waves-button'
                    }
                }
            });
        } else {
            console.log(rows[0].id);
            location.href = href + "#" + rows[0].id;
            createDialog = $.dialog({
                animationSpeed: 300,
                title: '编辑角色',
                content: 'url:/page/sys/role/form.html',
                onContentReady: function () {
                    initMaterialInput();
                }
            });
        }
    }

    function deleteRole(ids, cb, ecb) {
        iDelete('/api/role', ids, null, cb, ecb);
    }

    // 删除
    function deleteAction() {
        var rows = $table.bootstrapTable('getSelections');
        deleteRowsAction(rows);
    }

    function deleteRowsAction(rows) {
        if (rows.length == 0) {
            $.confirm({
                title: false,
                content: '请至少选择一条记录！',
                autoClose: 'cancel|3000',
                backgroundDismiss: true,
                buttons: {
                    cancel: {
                        text: '取消',
                        btnClass: 'waves-effect waves-button'
                    }
                }
            });
        } else {
            $.confirm({
                type: 'red',
                animationSpeed: 300,
                title: false,
                content: '确认删除？',
                buttons: {
                    confirm: {
                        text: '确认',
                        btnClass: 'waves-effect waves-button',
                        action: function () {
                            var ids = new Array();
                            for (var i in rows) {
                                ids.push(rows[i].id);
                            }
                            deleteRole(ids, function (data) {
                                $.confirm({
                                    theme: data.status == 'SUCCESS' ? 'light' : 'dark',
                                    animation: 'rotateX',
                                    closeAnimation: 'rotateX',
                                    title: false,
                                    content: data.status == 'SUCCESS' ? data.msg : "有用户正在使用当前角色",
                                    buttons: {
                                        confirm: {
                                            text: '确认',
                                            btnClass: 'waves-effect waves-button waves-light',
                                            action: function () {
                                                if (data.status == 'SUCCESS') {
                                                    $table.bootstrapTable('refresh');
                                                }
                                            }
                                        }
                                    }
                                });

                            }, function (data) {
                                console.log(data)
                            })
                        }
                    },
                    cancel: {
                        text: '取消',
                        btnClass: 'waves-effect waves-button'
                    }
                }
            });
        }
    }
</script>
</body>
</html>